import { useEffect, useCallback } from 'react'
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import { Link } from 'react-router-dom';
import { useWorkspace } from "../../app/workspace"
import './index.css'
import avatarIcon from './avatar.png'
import arrowDown from './arrow-down.png'
export const Header = () =>{
  const work = useWorkspace();

  useEffect(() =>{
    try{
      if(!work.wallet){
        const walletBtn:any = document.querySelector('.wallet-adapter-button')
        console.log(walletBtn)
        walletBtn.click()
      }
    }catch(e){
      console.log('有钱包')
    }
  },[work])

  return(
    <div className="header flex flex-row items-center">
      <div className="grid-width flex flex-row justify-between">
        <Link to="/home">
          <div className="header-avatar">
            <img className="header-avatar-icon" src={avatarIcon} alt=""/>
            <span className="header-name">Melic</span>
          </div>
        </Link>
        <div className="tool">
          <div className="tool-lange">
            EN
            <img src={arrowDown} className="tool-lange-icon" alt=""/>
          </div>
          <div className="tool-btn">
            <WalletMultiButton/>
          </div>
        </div>
      </div>
    </div>
  )
}
